<template>
  <div class="my page" v-if="userInfo">
    <van-nav-bar class="bg_white" title="个人中心" />
    <div class="wrapper" ref="webview">
      <div class="top-hd">
        <div class="avatar-url">
          <img src="/static/img/avatar.png" />
        </div>
        <div class="user-info">
          <div class="account">{{userInfo.nickname | phoneFilter}}</div>
          <span class="real-name" @click="goCert">{{isCert?'您未完成实名认证':'查看实名信息'}}></span>
        </div>
      </div>
      <div class="earnings-statistical">
        <div class="withdrawal">
          <div class="amount">{{userInfo.balance | toDecimalByCutoffWithoutOmit}}</div>
          <div class="text">可提现佣金</div>
          <div class="btn" @click="goRouter('withdrawal/form')">提现</div>
        </div>
        <div class="earnings">
          <div class="rows-flex">
            <div class="rows">
              <div class="wp">
                <img class="icon" src="/static/img/icon-1.png" />
                <div class="r">
                  <div class="amount">{{userInfo.balance | toDecimalByCutoffWithoutOmit}}</div>
                  <div class="size-text">累计佣金</div>
                </div>
              </div>
            </div>
            <div class="rows">
              <div class="wp">
                <img class="icon" src="/static/img/icon-2.png" />
                <div class="r">
                  <div class="amount">{{userInfo.regScore}}</div>
                  <div class="size-text">注册积分</div>
                </div>
              </div>
            </div>
            <div class="rows">
              <div class="wp">
                <img class="icon" src="/static/img/icon-3.png" />
                <div class="r">
                  <div class="amount">{{userInfo.distScore}}</div>
                  <div class="size-text">配送积分</div>
                </div>
              </div>
            </div>
            <div class="rows">
              <div class="wp">
                <img class="icon" src="/static/img/icon-4.png" />
                <div class="r">
                  <div class="amount">{{userInfo.repeatScore}}</div>
                  <div class="size-text">复购积分</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-group">
        <div class="cell" @click="goRouter('my/team')">
          <img class="icon" src="/static/img/icon-menu-1.png" />
          <div class="title">我的团队</div>
        </div>
        <div class="cell" @click="goRouter('team')">
          <img class="icon" src="/static/img/icon-menu-2.png" />
          <div class="title">市场团队</div>
        </div>
        <div class="cell" @click="goRouter('my/upgrade')" v-if="userInfo.level_value<4">
          <img class="icon" src="/static/img/icon-menu-3.png" />
          <div class="title">会员升级</div>
        </div>
        <div class="cell" @click="goRouter('order/mall')">
          <img class="icon" src="/static/img/icon-menu-4.png" />
          <div class="title">商城订单</div>
        </div>
        <div class="cell" @click="goRouter('my/commission')">
          <img class="icon" src="/static/img/icon-menu-5.png" />
          <div class="title">佣金转积分</div>
        </div>
        <div class="cell" @click="goRouter('reg/points/transfer')">
          <img class="icon" src="/static/img/icon-menu-6.png" />
          <div class="title">积分转账</div>
        </div>
        <div class="cell" @click="goRouter('declaration')">
          <img class="icon" src="/static/img/icon-menu-7.png" />
          <div class="title">报单中心</div>
        </div>
        <div class="cell" @click="goRouter('address/list')">
          <img class="icon" src="/static/img/icon-menu-8.png" />
          <div class="title">地址管理</div>
        </div>
        <div class="cell" @click="goRouter('details/bonus')">
          <img class="icon" src="/static/img/icon-menu-9.png" />
          <div class="title">奖金明细</div>
        </div>
        <div class="cell" @click="goRouter('account/setup')">
          <img class="icon" src="/static/img/icon-menu-10.png" />
          <div class="title">账户管理</div>
        </div>
      </div>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'My',
  data () {
    return {
      isActive: 1,
      isPopup: true,
      isSwitch_1: false,
      isSwitch_2: false
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'isCert'])
  },
  created () {
    this.isSwitch_1 = !this.userInfo.isNeedRepeat;
    this.isSwitch_2 = !this.userInfo.isNeedRepeat;
    this.$store.dispatch('setUserInfo');
  },
  methods: {
    goCert () {
      this.$router.push({ path: '/authentication', query: { type: this.isCert ? 1 : 2 } });
    },
    goRouter (path) {
      var query = {};
      if (path === 'order/mall') {
        query = { isFromRoute: true };
      }
      if (path === 'declaration') {
        query = { type: !this.userInfo.is_service ? 1 : 2 };
      }
      this.$router.push({ path: '/' + path, query });
    }
  }
};
</script>
<style lang="less" scoped>
.my {
  display: flex;
  flex-direction: column;
  .wrapper {
    flex: 1;
    overflow: auto;
  }
  .top-hd {
    box-sizing: border-box;
    padding: 46px 40px 46px;
    background-color: #fff;
    display: flex;
    .avatar-url {
      width: 136px;
      height: 136px;
      margin-right: 32px;
      background-color: #e4ecf2;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 136px;
        height: 136px;
        border-radius: 50%;
        object-fit: contain;
      }
    }
    .user-info {
      flex: 1;
      .account {
        display: block;
        font-size: 48px;
        color: #333;
        font-weight: bold;
        margin: 10px 0;
      }
      .real-name {
        font-size: 24px;
        color: #333;
        vertical-align: middle;
      }
      .buy-add {
        height: 60px;
        padding: 10px 55px 10px 32px;
        background: linear-gradient(0deg, rgba(239, 236, 255, 1) 0%, rgba(203, 195, 255, 1) 100%);
        color: #7c67ff;
        font-size: 28px;
        border-radius: 8px;
        position: relative;
        &::after {
          content: '';
          display: inline-block;
          width: 12px;
          height: 22px;
          position: absolute;
          right: 29px;
          top: 50%;
          margin-top: -12px;
          background-image: url('/static/images/icon-my-bt-arrow-right.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .menu-group {
    background-color: #fff;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 64px;
    .cell {
      width: 205px;
      text-align: center;
      padding: 10px 0 40px;
      .icon {
        width: 60px;
      }
      .title {
        color: #000;
        font-size: 28px;
        margin-top: 5px;
      }
    }
  }
  .earnings-statistical {
    background-color: #fff;
    margin-top: -20px;
    padding: 30px 25px 0;
    .withdrawal {
      background: linear-gradient(80deg, #2087fe 0%, #5049e4 100%);
      height: 180px;
      border-radius: 10px;
      margin: 0 15px;
      position: relative;
      padding: 20px 30px 32px;
      color: #fff;
      .amount {
        font-size: 70px;
      }
      .text {
        line-height: 32px;
      }
      .btn {
        position: absolute;
        top: 60px;
        right: 0;
        font-size: 28px;
        border-top-left-radius: 68px;
        border-bottom-left-radius: 68px;
        background: linear-gradient(80deg, #2087fe 0%, #5049e4 100%);
        height: 68px;
        padding: 14px 48px 14px 88px;
        color: #fff;
        &::before {
          content: '';
          display: block;
          width: 40px;
          height: 40px;
          background-image: url('/static/img/icon-withdrawal.png');
          background-position: 0 0;
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          left: 32px;
          top: 12px;
        }
      }
    }
    .earnings {
      padding: 30px 0 10px;
      .rows-flex {
        display: flex;
        flex-wrap: wrap;
        .rows {
          width: 50%;
          .wp {
            padding: 30px 50px;
            box-sizing: border-box;
            display: flex;
            box-shadow: -1px 3px 10px #d4d4d5;
            margin: 18px;
          }
          .icon {
            width: 76px;
            height: 76px;
            margin-right: 10px;
            img {
              width: 76px;
              height: 76px;
            }
          }
          .r {
            flex: 1;
            padding: 5px;
          }
          .size-text {
            font-size: 24px;
            color: #999999;
            display: flex;
            align-items: center;
            padding-top: 4px;
          }
          .amount {
            font-size: 32px;
            color: #474747;
            line-height: 32px;
            position: relative;
            font-weight: bold;
          }
          .text {
            color: #545454;
          }
          .c1 {
            color: #7c67ff;
          }
        }
      }
    }
    .statistical {
      display: flex;
      justify-content: space-between;
      padding: 40px 30px 0;
      .flex {
        display: block;
        width: 100px;
        .percentage {
          width: 90px;
          height: 90px;
          display: block;
          margin: 0 auto;
          border-radius: 90px;
          text-align: center;
          color: #fff;
          font-size: 34px;
          line-height: 90px;
          &::after {
            content: '%';
            color: #fff;
            font-size: 20px;
          }
        }
        .bg-1 {
          background-color: #ff4738;
        }
        .bg-2 {
          background-color: #ffa413;
        }
        .bg-3 {
          background-color: #3a83ff;
        }
        .bg-4 {
          background-color: #e9af80;
        }
        .text {
          font-size: 24px;
          color: #545454;
          padding: 20px 0 10px;
          display: block;
          text-align: center;
        }
      }
    }
  }
}
</style>
